<template>
  <div class="goods-image" v-if="imgarr">
      <div class="large" :style="[{ backgroundImage: `url(${imgarr[nowindex]})`, },imgobj]" v-show="show"></div>
      <div class="middle" ref="middle" v-if="imgarr"  @mouseenter="show=true" @mouseleave="show=false" @mousemove="move($event)">
          <img :src="imgarr[nowindex]">
          <div class="cover" :style="coverobj" v-show="show" ref="cover"></div>
      </div>
      <ul class="small">
          <li v-for="(item, key) in imgarr" :key="key" :class="{ active: nowindex == key }">
              <img :src="item" @mouseenter="nowindex = key">
          </li>
      </ul>
  </div>
</template>

<script>
    export default {
        props:['imgarr'],
        data(){
            return{
              nowindex: 0,
              show:false,//控制色块和大图显示与隐藏
              coverobj:{top:"0",left:"0"},//色块的位移
              imgobj:{backgroundPositionX:"0",backgroundPositionY:"0"}//设置图像的位移
            }
        },
        methods:{
          // 思路 第一步 我们获取到middle dom对象和遮罩的dom对象 初步的算出我们鼠标移动盒子的中心距离
          move(e){
            // 第一步 我们获取到middle dom对象和遮罩的dom对象
            const mid=this.$refs.middle
            const cover=this.$refs.cover
            // 初步设置x的坐标位置 获取mid的offset的时候要注意的是要获取从当前元素到根元素body所有offset的和
            // console.log(e.pageX,this.getLeft(mid),cover.offsetWidth);
            let x=e.pageX-this.getLeft(mid)-cover.offsetWidth/2
            let y=e.pageY-this.getTop(mid)-cover.offsetHeight/2
            let maxx=mid.offsetWidth-cover.offsetWidth
            let maxy=mid.offsetHeight-cover.offsetHeight
            if(x<=0){
              x=0
            }else if(x>=maxx){
              x=maxx
            }
            if(y<=0){
              y=0
            }else if(y>=maxy){
              y=maxy
            }
            // console.log(x,y);
            // 控制coverobj
            this.coverobj.left=x+'px'
            this.coverobj.top=y+'px'
            // 再控制大图
            this.imgobj.backgroundPositionX=-(x*2)+'px'
            this.imgobj.backgroundPositionY=-(y*2)+'px'
            // console.log(this.imgobj.backgroundPositionX,this.imgobj.backgroundPositionY);
          },
          // 用递归的方式来获取当前元素的offsetLeft
          getLeft(obj){
            let left=obj.offsetLeft
            // 如果有父元素
            if(obj.offsetParent!=null){
              left+=this.getLeft(obj.offsetParent)
            }
            return left
          },
          // 获取到当前元素到顶部的距离
          getTop(obj){
            let top=obj.offsetTop
            // 如果有父元素
            if(obj.offsetParent!=null){
              top+=this.getTop(obj.offsetParent)
            }
            return top
          }
        }
    }
</script>

<style scoped lang="scss">
@import "@/assets/css/variables.scss";
.goods-image {
    width: 480px;
    height: 400px;
    position: relative;
    display: flex;
      z-index: 500;
  .large {
   position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-repeat: no-repeat;
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }
    .middle {
        width: 400px;
        height: 400px;
        background: #f5f5f5;
        position: relative;
        cursor: move;
        .cover {
          width: 200px;
          height: 200px;
          background: rgba(0,0,0,.2);
          left: 0;
          top: 0;
          position: absolute;
        }
    }
    .small {
        width: 80px;
        li {
            width: 68px;
            height: 68px;
            margin-left: 12px;
            margin-bottom: 15px;
            cursor: pointer;

            &:hover,
            &.active {
                border: 2px solid $xtxColor;
            }
        }
    }
}
</style>